<template>
  <VPage>
    <VTable ref="tableRef" v-bind="tableOptions">
      <template #form="{ form }">
        <VGroup>
          <el-select v-model="form.input.type" style="width: 182px">
            <el-option label="采购单号" value="purchase_no"></el-option>
            <el-option label="1688订单号" value="platform_order_no"></el-option>
            <el-option label="计划单号" value="plan_no"></el-option>
            <el-option label="来源单号" value="source_no"></el-option>
            <el-option label="付款单号" value="payment_no"></el-option>
            <el-option label="跟踪号" value="tracking_no"></el-option>
            <el-option label="合同单号" value="contact_no"></el-option>
            <el-option label="备料单号" value="plan_no"></el-option>
            <el-option label="采购单号/SKU/备货PR" value="purchase_no_sku_source_no"></el-option>
          </el-select>
          <VBatchInput v-model="form.input.value" @search="query" class="w-60" />
        </VGroup>
        <VGroup>
          <el-select v-model="form.skuInfo.type" class="w-28">
            <el-option label="sku" value="sku"></el-option>
            <el-option label="赛盒SKU" value="sai_he_sku"></el-option>
            <el-option label="自定义sku" value="custom_sku"></el-option>
          </el-select>
          <VBatchInput v-model="form.skuInfo.value" @search="query" class="w-60" />
        </VGroup>
        <VSelect v-model="form.supplier_name" placeholder="供应商" type="supplierName" allow-create style="min-width: 200px" multiple collapse-tags clearable filterable />
        <VSelect v-model="form.purchase_audit_status" placeholder="订单状态" :options="options.purchase_audit_status" multiple collapse-tags style="min-width: 160px" />
        <VSelect v-model="form.order_source" placeholder="订单来源" :options="options.order_source" multiple collapse-tags style="min-width: 160px" />
        <VCascader v-model="form.department_name" placeholder="需求部门" type="department" multiple collapse-tags checkStrictly style="min-width: 160px" />
        <VSelect v-model="form.country" placeholder="国家" :options="options.country" multiple collapse-tags style="min-width: 160px" />
        <VSelect v-model="form.destination_warehouse" placeholder="发货仓库" type="warehouse156" multiple collapse-tags style="min-width: 160px" />
        <VSelect v-model="form.purchase_type" placeholder="供应商类型" :options="options.purchase_type" multiple collapse-tags style="min-width: 160px" />
        <VSelect v-model="form.payment_type" placeholder="付款方式" :options="options.payment_type" multiple collapse-tags style="min-width: 160px" />
        <VSelect v-model="form.period_id" placeholder="结算方式" type="period" multiple collapse-tags style="min-width: 220px" />
        <VGroup>
          <el-select v-model="form.user.type" style="width: 130px">
            <el-option label="采购人员" value="purchase_user_id"></el-option>
            <el-option label="供应商负责人员" value="director_id"></el-option>
          </el-select>
          <VCascader v-model="form.user.value" placeholder="人员" multiple collapse-tags style="min-width: 160px" />
        </VGroup>
        <VSelect v-model="form.purchase_status" placeholder="采购状态" :options="options.purchase_status" multiple collapse-tags style="min-width: 160px" />
        <VSelect v-model="form.prepare_type" placeholder="备货方式" :options="options.prepare_type" multiple collapse-tags style="min-width: 160px" />
        <VSelect v-model="form.is_drawback" placeholder="是否退税" :options="options.is_drawback" multiple collapse-tags style="min-width: 160px" />
        <VSelect v-model="form.company_id" placeholder="公司主体" :options="options.company_id" multiple collapse-tags style="min-width: 210px" />
        <VSelect v-model="form.is_change" placeholder="是否变更" :options="options.is_new" multiple collapse-tags style="min-width: 160px" />
        <VGroup>
          <el-select v-model="form.warehouse.type" class="w-28" @change="form.warehouse.value = []">
            <el-option label="需求仓平台" value="demand_warehouse"></el-option>
            <el-option label="需求仓库" value="plan_demand_warehouse"></el-option>
          </el-select>
          <VSelect v-if="form.warehouse.type === 'demand_warehouse'" v-model="form.warehouse.value" placeholder="请选择" :options="options.demand_warehouse" multiple collapse-tags
            style="min-width: 160px" />
          <VSelect v-else v-model="form.warehouse.value" placeholder="请选择" :options="options.plan_demand_warehouse" multiple collapse-tags style="min-width: 160px" />
        </VGroup>
        <VSelect v-model="form.finance_status" placeholder="财务状态" :options="options.finance_status" multiple collapse-tags style="min-width: 160px" />
        <VSelect v-model="form.is_abnormal" placeholder="是否有异常" :options="options.is_abnormal" multiple collapse-tags style="min-width: 160px" />
        <VSelect v-model="form.is_delivery_due" placeholder="到货是否延期" :options="options.is_delivery_due" multiple collapse-tags style="min-width: 160px" />
        <!-- <VSelect v-model="form.abnormal_status" placeholder="异常处理状态" :options="options.abnormal_status" multiple
          collapse-tags style="min-width: 160px" /> -->
        <VSelect v-model="form.sku_is_complete" placeholder="是否完结" :options="options.is_complete" multiple collapse-tags style="min-width: 120px" />
        <VSelect v-model="form.complete_type" placeholder="完结类型" :options="options.complete_type" multiple collapse-tags style="min-width: 120px" />
        <VSelect v-model="form.change_deliver_status" placeholder="到货日期更新状态" :options="options.change_deliver_status" multiple collapse-tags style="min-width: 166px" />
        <VSelect v-model="form.platform" :options="options.platform" multiple collapse-tags style="min-width: 160px" placeholder="平台" />
          <VSelect v-model="form.order_status" placeholder="1688订单状态" :options="options.order_status" multiple collapse-tags style="min-width: 160px" />
        <VGroup>
          <el-select v-model="form.new.type" style="width: 130px">
            <el-option label="是否新品" value="is_new"></el-option>
            <el-option label="是否特采" value="is_special_purchase"></el-option>
          </el-select>
          <VSelect v-model="form.new.value" placeholder="请选择" :options="options.is_new" multiple collapse-tags style="min-width: 160px" />
        </VGroup>
        <VSelect v-model="form.is_dangerous" placeholder="是否危险品" :options="options.is_dangerous" multiple collapse-tags style="min-width: 160px" />
        <VSelect v-model="form.is_accord" placeholder="是否需求不满足" :options="options.is_accord" multiple collapse-tags style="min-width: 160px" />
        <VSelect v-model="form.demand_form" :options="options.demand_form" multiple collapse-tags style="min-width: 160px" placeholder="备库需求单类型" />
        <VGroup>
          <el-select v-model="form.dateRange.type" style="width: 130px">
            <el-option label="原始预计到货时间" value="origin_expect_delivery_time"></el-option>
            <el-option label="工厂交货时间" value="factory_time"></el-option>
            <el-option label="预计到货时间" value="expect_delivery_time"></el-option>
            <el-option label="下单时间" value="create_time"></el-option>
            <el-option label="最后审核时间" value="audit_time"></el-option>
            <el-option label="申请付款时间" value="apply_time"></el-option>
            <el-option label="付款时间" value="payment_time"></el-option>
            <el-option label="最后入库时间" value="inbound_time"></el-option>
            <el-option label="SKU入库时间" value="sku_inbound_time"></el-option>
            <el-option label="完结时间" value="complete_time"></el-option>
            <el-option label="需求时间" value="demand_time"></el-option>
          </el-select>
          <VDate v-model="form.dateRange.value" />
        </VGroup>
       <VSelect v-model="form.is_custom_product" :options="options.is_custom_product" multiple collapse-tags filterable clearable style="min-width: 140px" placeholder="是否定制化" />
      </template>
      <template #toolbar_btns>
        <VButton auth="/purchase/manage/purchase-sku/update_arrival_time" @click="handleBatch('updateTime')"><i class="dk-iconfont icon-Refresh" />更新到货时间</VButton>
        <VAudit :auth="['/purchase/manage/purchase-sku/review_estimated_arrival_time']" field="ps_id" url="/v1/purchase/purchase-sku/batch-audit" :tableRef="tableRef"
          :list="[{ label: '审核预计到货时间', value: 1 }]" @success="query" />
        <VButton auth="/purchase/manage/purchase-sku/completePurchase" :loading="loadings.completePurchase" @click="handleBatch('completePurchase')">手动完结
        </VButton>
        <VButton auth="/purchase/manage/purchase-sku/remark" @click="handleBatch('remark')">批量备注
        </VButton>
        <VButton auth="/purchase/manage/purchase-sku/download" :loading="loadings.download" @click="handleBatch('download')">批量下载GPSR
        </VButton>
        <UpdateDeclare auth="/purchase/manage/purchase-sku/updateDeclare" mainKey="ps_id" :tableRef="tableRef" @success="query" />
        <VImport auth="/purchase/manage/purchase-sku/import" :tableRef="tableRef" importUrl="/v1/purchase/purchase/import-tracking-no"
          downloadUrl="https://xc-pms.oss-cn-shenzhen.aliyuncs.com/template/purchase_sku_track_template.xlsx" class="ml-auto" @success="query">导入快递单号</VImport>
        <VExport ref="exportRef" class="absolute -right-full" auth="/purchase/manage/purchase-sku/derive" mainKey="p_id" :name="typeName" :tableRef="tableRef"
          :exportName="exportName">导出</VExport>
        <el-dropdown trigger="click" @command="handleExport">
          <el-button>
            <i class="dk-iconfont icon-Upload" />
            导出<i class="dk-iconfont icon-ArrowDown" />
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item :command="0">默认维度导出</el-dropdown-item>
              <el-dropdown-item :command="1">PO+SKU+入库维度</el-dropdown-item>
              <el-dropdown-item :command="2">PO+SKU+销售维度</el-dropdown-item>
              <el-dropdown-item :command="3">财务导出维度</el-dropdown-item>
              <el-dropdown-item :command="4">PO+发货计划+头程维度</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <!-- <VExport auth="/purchase/manage/purchase-sku/derive" mainKey="ps_id" :name="baseName" :tableRef="tableRef" task /> -->
      </template>
    </VTable>
    <Add ref="addRef" />
    <VLog ref="logRef" />
    <VHistory ref="historeRef" />
    <UpdateTime ref="updateTimeRef" :options="options" />
    <Tracking ref="trackingRef" />
    <Pdf ref="pdfRef" />
    <ChangeLog ref="changeLogRef" />
    <ViewImage ref="viewImageRef" />
  </VPage>
</template>

<script setup lang="jsx" name="Account">
import api from './api'
import Add from '@/views/manage/purchase/components/Add'
import Tracking from '../purchase/components/Tracking'
import VImport from '@/components/VImport'
import VHistory from '@/components/VHistory'
import UpdateDeclare from '@/components/UpdateDeclare'
import UpdateTime from './components/UpdateTime'
import ChangeLog from './components/ChangeLog'
import { getOption } from '@/api/public'
import { ElMessage, ElMessageBox } from 'element-plus'
import { resMessage } from '@/utils/res'
import { yesno } from '@/utils'
import Pdf from '@/views/settings/contract/components/Contract/Pdf'
import VXETable from 'vxe-table'
import XEUtils from 'xe-utils'

const baseName = 'purchase'
const tableRef = ref()
const logRef = ref()
const historeRef = ref()
const updateTimeRef = ref()
const viewImageRef = ref()
const loadings = reactive({})
// 查询
const query = () => {
  tableRef?.value.query()
}

// 添加
const addRef = ref()

// 获取options
const options = ref({})
Promise.all([
  getOption({ type: 'payment' }).then(res => res.data),
  getOption({ type: 'refund' }).then(res => res.data),
  getOption({ type: 'return_goods' }).then(res => res.data),
  getOption({ type: baseName }).then(res => res.data),
  Promise.resolve({ test: [{ label: '没有数据', value: 1 }] })
]).then(res => {
  options.value = res.reduce((acc, cur) => (((acc = { ...acc, ...cur }), acc)), {})
})

const exportRef = ref()
const exportName = ref('')
const typeName = ref()
const handleExport = (val) => {
  // tableRef?.value.setFormField('export_type', val)
  typeName.value = ['purchase_sku','purchase_sku_inbound','purchase_sku_sale','purchase_sku_finance','purchase_sku_deliver'][val]
  exportName.value = ['默认维度导出','PO+SKU+入库维度', 'PO+SKU+销售维度', '财务导出维度','PO+发货计划+头程维度'][val]
  nextTick(() => {
    exportRef?.value.open()
  })
}


const handleBatch = (name) => {
  const selection = tableRef.value.$table.getCheckboxRecords()
  if (!selection.length) {
    ElMessage.warning('请先选择行')
    return
  }
  const ps_ids = selection.map(d => d.ps_id)
  const showLoading = () => loadings[name] = true
  const closeLoading = () => loadings[name] = false
  const handle = {
    download: async() => {
      const down = async() => {
        showLoading()
        const blob = await api.downloadLabel({ps_ids: yes.map(d => d.ps_id)})
        VXETable.saveFile({ filename: `欧英代标签-${XEUtils.toDateString(new Date(), 'yyyyMMdd')}`, type: 'zip', content: blob })
        closeLoading()
      }
      const { yes, no } = yesno(selection, (d) => ['FR', 'DE', 'ES', 'UK', 'IT'].includes(d.country), false)
      if(!yes?.length) {
        ElMessage.error('没有可下载的GPSR标签')
        return
      }
      if(!no?.length) {
        down()
        return
      }
      ElMessageBox({
        title: '批量下载GPSR',
        showCancelButton: true,
        showConfirmButton: true,
        confirmButtonText: '跳过继续下载',
        cancelButtonText: '关闭',
        customClass: 'message-box-520',
        message: () => <div>
          {no.map(d => {
            const {purchase_no, sku, country} = d
            return <div>{`${purchase_no}，sku: ${sku}，国家为${country}，没有可下载的GPSR标签`}</div>
          })}
        </div>
      }).then(() => {
        down()
      })
    },
    completePurchase: () => {
      showLoading()
      api.completePurchase({ ps_ids }).then(res => {
        resMessage({
          res,
          success: () => {
            ElMessage.success('操作成功')
            query()
          }
        })
      }).finally(closeLoading)
    },
    updateTime: () => {
      updateTimeRef?.value.open(ps_ids)
    },
    remark: () => {
      showLoading()
      ElMessageBox.prompt('备注', '批量备注', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputValidator: (val) => !val ? '不能为空' : true,
        inputType: 'textarea',
      })
        .then(({ value }) => {
          showLoading()
          api.updateRemark({ ps_ids, remark: value }).then(res => {
            ElMessage.success('操作成功')
            query()
          }).finally(closeLoading)
        })
        .catch(() => {
          ElMessage({
            type: 'info',
            message: '取消操作',
          })
        })
    },
  }
  handle[name]()
}

// 单行操作
const trackingRef = ref()
const pdfRef = ref()
const changeLogRef = ref()
const handleRow = (name, row, rowIndex) => {
  const { ps_id, p_id } = row
  const showLoading = () => {
    loadings[name + rowIndex] = true
  }
  const closeLoading = () => {
    loadings[name + rowIndex] = false
  }
  const handle = {
    view: () => {
      showLoading()
      api.previewLabel({ps_ids: [ps_id]}).then(res => {
        viewImageRef?.value.open(res.data[0])
      }).finally(closeLoading)
    },
    download: async() => {
      showLoading()
      const blob = await api.downloadLabel({ps_ids: [ps_id]})
      VXETable.saveFile({ filename: `${row.supplier_name}-${row.sku}-${row.country_name_cn}GPSR-${XEUtils.toDateString(new Date(), 'yyyyMMdd')}`, type: 'zip', content: blob })
      closeLoading()
    },
    look: () => {
      addRef?.value.open(p_id)
    },
    pdf: () => {
      showLoading('pdf')
      pdfRef?.value.pdf(row, {
        isLook: true,
        closeLoading
      })
    },
    remark: () => {
      api.updateRemark({ ps_ids: [ps_id], remark: row.remark }).then(res => {
        ElMessage.success('操作成功')
      })
    },
    special: () => {
      ElMessageBox.confirm('是否要确认该sku的不良品数量进行特采入库？', '备注', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      })
        .then(({ value }) => {
          showLoading()
          api.purchaseSku({ ps_id }).then(res => {
            ElMessage.success('操作成功')
            query()
          }).finally(closeLoading)
        })
        .catch(() => {
          ElMessage({
            type: 'info',
            message: '取消操作',
          })
        })
    },
    changeLog: () => {
      changeLogRef?.value.open({ps_id, change_type: 1})
    },
    changeLog2: () => {
      changeLogRef?.value.open({ps_id, change_type: 2})
    },
    log: () => {
      logRef?.value.open({ log_type: 'purchase_sku', ps_id })
    },
  }
  handle[name]()
}

// 列表配置
const tableOptions = reactive({
  rowConfig: { height: 202 },
  showHeaderOverflow: false,
  showOverflow: false,
  formConfig: {
    data: {
      new: { type: 'is_new', value: '' }, // 组合
      input: { type: 'purchase_no', value: '' },
      skuInfo: { type: 'sku', value: '' },
      user: { type: 'purchase_user_id', value: [] },
      warehouse: { type: 'demand_warehouse', value: [] },
      dateRange: { type: 'expect_delivery_time', value: [], range: true },
      purchase_audit_status: [4]
    }
  },
  columns: [
    { type: 'checkbox', width: 40, fixed: 'left' },
    {
      width: 160, slots: {
        header: () => <div>采购单号</div>,
        default: ({ row }) => <div>
          <VText type='link' value={row.purchase_no} onClick={() => handleRow('look', row)}></VText>
          <VText title='类型'>{row.purchase_type_name}</VText>
          <VText title='发货仓'>{row.destination_warehouse_name}</VText>
          <VText title='备货方式' value={row.prepare_type_name}></VText>
          <VText title='是否完结' value={row.is_complete_name}></VText>
          <VText title='完结时间' value={row.complete_time}></VText>
          <VText title='完结类型' value={row.complete_type_name}></VText>
          <VText title='订单状态' value={row.audit_status_name}></VText>
          <VText title='合同' value={row.contract_no} type='button' onClick={() => handleRow('pdf', row)}></VText>
        </div>
      }
    },
    {
      width: 120, slots: {
        header: () => <div>跟进备注</div>,
        default: ({ row }) => <el-input v-model={row.remark} type='textarea' autosize={{ minRows: 2, maxRows: 5 }} placeholder="请输入" onChange={() => handleRow('remark', row)} />
      }
    },
    {
      width: 220, slots: {
        header: () => <div>需求信息</div>,
        default: ({ row }) => <div>
          <VText title='订单来源' value={row.order_source_name} />
          <VText title='来源单号' value={row.source_no} />
          <VText title='需求单类型' value={row.demand_form_name} />
          <VText title='需求部门' value={row.department_name} />
          <VText title='需求时间' value={row.demand_time} />
          <VText title='需求仓库' value={row.demand_warehouse_name} />
          <VText title='是否变更' value={row.is_change_name} />
        </div>
      }
    },
    {
      width: 200, slots: {
        header: () => <div>备料信息</div>,
        default: ({ row, rowIndex }) => <VMore key={rowIndex}>
          {{
            default: (line) => (row.plan_data || []).map(d => <div class='w-full'>
          <VText title='备料单号' value={d.plan_no}></VText>
          <VText title='备料数量' value={d.plan_num}></VText>
          <VText title='预计到货时间' value={d.pre_factory_time}></VText>
            </div>)
          }}
        </VMore>
      }
    },
    {
      width: 280, slots: {
        header: () => <div>负责人员</div>,
        default: ({ row }) => <div>
          <VText title='采购人员' value={row.purchase_user_name}></VText>
          <VText title='下单时间' value={row.create_time}></VText>
          <VText title='审核时间' value={row.audit_time}></VText>
          <VText title='预计到货时间' value={row.expect_delivery_time}></VText>
          <VText title='入库时间' value={row.inbound_time}></VText>
          <VText title='完结时间' value={row.complete_time}></VText>
            <VText
                title='1688订单号'
                value={row.platform_order_no}
                type='link'
                copy
                onClick={() => {
                    // 打开新窗口
                    window.open(
                        `https://trade.1688.com/order/new_step_order_detail.htm?orderId=${row.platform_order_no}`,
                        '_blank' // 在新窗口打开
                    );
                }}
            />
          <VText title='1688订单状态' value={row.platform_order_status_name}></VText>
        </div>
      }
    },
    {
      width: 240, slots: {
        header: () => <div>供应商信息</div>,
        default: ({ row }) => <div>
          <VText title='供应商' value={row.supplier_name}></VText>
          <VText title='供应商id' value={row.supplier_code} />
          <VText title='结算方式' value={row.period_name} />
        </div>
      }
    },
    {
      width: 220, slots: {
        header: () => <div>sku信息</div>,
        default: ({ row }) => <div>
          <VText title="需求ID" value={row.sku_no} />
          <VText title="平台" value={row.platform_name} />
          {row.is_accord === 1 ? <el-tag size='small' type='danger' effect="dark" class='mb-1'>{row.is_accord_name}</el-tag> : ''}
          <VText title='sku'>
            <span class='whitespace-nowrap'>{row.sku}</span>
            {row.is_new === 2 ? <el-tag type="success" effect="dark" size='small' class='mx-1'>新</el-tag> : ''}
            {row.is_special_purchase === 2 ? <el-tag type="danger" size='small' effect="dark">特</el-tag> : ''}
            {row.is_dangerous === 2 ? <svg t="1731396340885" class="-mt-[1px]" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7755" width="24" height="24"><path d="M426.14784 160.23552l-368.27136 628.736a102.4 102.4 0 0 0 88.35072 154.17344h736.54272a102.4 102.4 0 0 0 88.35072-154.17344l-368.2304-628.736a102.4 102.4 0 0 0-176.7424 0z" fill="#FADE14" p-id="7756"></path><path d="M545.54624 158.96576a61.44 61.44 0 0 1 21.95456 21.99552l368.27136 628.736a61.44 61.44 0 0 1-53.00224 92.48768H146.2272a61.44 61.44 0 0 1-53.00224-92.48768l368.2304-628.736a61.44 61.44 0 0 1 84.09088-21.99552z m-63.73376 28.34432l-2.6624 3.97312-368.27136 628.736a40.96 40.96 0 0 0 30.55616 61.44l4.79232 0.24576h736.54272a40.96 40.96 0 0 0 37.51936-57.42592l-2.17088-4.25984-368.27136-628.736a40.96 40.96 0 0 0-68.03456-3.97312z" fill="#333333" p-id="7757"></path><path d="M450.1504 397.47584a385.26976 385.26976 0 0 1-123.2896 123.2896l19.6608 23.7568c12.288-8.6016 24.576-17.6128 36.864-27.4432v85.1968c-1.6384 67.1744-20.48 119.1936-56.5248 156.8768l23.7568 21.2992c39.3216-44.6464 60.2112-104.0384 62.2592-178.176v-66.7648h277.2992v-28.672h-121.6512c16.384-13.9264 33.1776-31.1296 49.9712-50.7904v-21.2992h-158.1056c6.9632-9.8304 13.5168-20.0704 20.0704-30.72l-30.3104-6.5536z m79.872 109.3632H395.6736c15.9744-14.336 31.1296-29.9008 45.4656-46.6944h138.8544c-16.384 17.6128-33.1776 33.1776-49.9712 46.6944z m73.728 101.5808v38.0928c0 13.1072-5.3248 19.6608-15.9744 19.6608-14.7456 0-31.1296-0.8192-49.152-2.4576l6.9632 27.8528c17.2032 0.8192 34.816 1.2288 52.8384 1.2288 23.3472-0.8192 35.2256-13.5168 35.2256-37.2736v-73.3184h-169.1648v153.6c0 24.576 13.1072 36.864 40.1408 36.864h129.4336c23.3472 0 39.3216-3.6864 47.5136-10.24 9.0112-8.192 15.1552-30.72 18.8416-66.7648l-28.2624-9.0112c-2.4576 23.7568-5.7344 39.7312-10.6496 47.9232-4.5056 6.9632-16.384 10.6496-35.2256 10.6496h-109.7728c-14.7456 0-22.1184-6.5536-22.1184-19.2512v-117.5552h109.3632z" fill="#333333" p-id="7758"></path></svg> : ''}
          </VText>
          <el-button link type='primary' onClick={() => historeRef?.value.open(row.sku)}>历史采购记录</el-button>
          <VText title='自定义sku'>{row.custom_sku}</VText>
          <VText title='是否特采'>{row.is_special_purchase_name}</VText>
          <el-button link type='primary' onClick={() => handleRow('look', row)}>产品信息<svg-icon icon-class="arrow_more_right" style="font-size: 16px" /></el-button>
          <VText title='是否退税' value={row.is_refund_tax_name} />
          <VText title='是否定制化' value={row.is_custom_product_name} />
        </div>
      }
    },
    {
      width: 100, slots: {
        header: () => <div>图片</div>,
        default: ({ row }) => <VImage src={row.main_img} size='80px' />
      }
    },
    {
      width: 160, slots: {
        header: () => <div>产品名称</div>,
        default: ({ row }) => <VText value={row.sku_cn_title} line={6} />
      }
    },
    {
      width: 140, slots: {
        header: () => <div>下单数量<br />产品单价<br/>采购未税价<br/>入库数量</div>,
        default: ({ row }) => <div>
          <VText title='下单数量'>{row.purchase_num}</VText>
          <VText title='产品单价'>{row.is_drawback === 2 ? row.unit_price_tax : row.unit_price}</VText>
          <VText title='采购未税价'>{row.unit_untaxed_price}</VText>
          <VText title='入库数量'>{row.inbound_num}</VText>
        </div>
      }
    },
    {
      width: 120, slots: {
        header: () => <div>产品总金额</div>,
        default: ({ row }) => <div>
          <div>{row.is_drawback === 2 ? row.total_price_tax : row.total_price}</div>
        </div>
      }
    },
    {
      width: 160, slots: {
        header: () => <div>运费分摊<br />折扣分摊</div>,
        default: ({ row }) => <div>
          <VText title='运费'>{row.tracking_price}</VText>
          <VText title='折扣'>{row.discount_price}</VText>
          <VText title='采购总金额'>{row.is_drawback === 2 ? row.total_price_tax : row.total_price}</VText>
        </div>
      }
    },
    {
      width: 170, slots: {
        header: () => <div>单个采购成本<br />采购总成本</div>,
        default: ({ row }) => <div>
          <VText title='单个采购成本'>{row.is_drawback === 2 ? row.unit_purchase_price_tax : row.unit_purchase_price}</VText>
          <VText title='采购总成本'>{row.is_drawback === 2 ? row.total_purchase_price_tax : row.total_purchase_price}</VText>
        </div>
      }
    },
    {
      width: 120, title: '原始预计到货时间', field: 'origin_expect_delivery_time'
    },
    {
      width: 120, slots: {
        header: () => <div>预计到货时间</div>,
        default: ({ row }) => {
          return <div>
            <VText value={row.expect_delivery_time} />
              <VText value='变更日志' type='button' onClick={() => handleRow('changeLog', row)} />
          </div>
        }
      }
    },
    // {
    //   minWidth: 140, slots: {
    //     header: () => <div>更新到货时间原因</div>,
    //     default: ({ row, rowIndex }) => {
    //       const { change_deliver } = row
    //       console.log('change_deliver', change_deliver)
    //       if (!change_deliver?.length) return '-'
    //       return <div>
    //         {change_deliver.map((d, i) => <VText title={['一更原因', '二更原因', '三更原因'][i]} value={d.change_remark} line={2} />)}
    //       </div>
    //     }
    //   }
    // },
    {
      width: 120, title: '原始工厂可交货时间', field: 'origin_factory_time'
    },
    {
      width: 120, slots: {
        header: () => <div>工厂可交货时间</div>,
        default: ({ row }) => {
          return <div>
            <VText value={row.factory_time} />
              <VText value='变更日志' type='button' onClick={() => handleRow('changeLog2', row)} />
          </div>
        }
      }
    },
    {
      width: 180, slots: {
        header: () => <div>物流信息</div>,
        default: ({ row, rowIndex }) => {
          console.log('row.', row.tracking_data)
          return <VMore key={rowIndex}>
            {{
              default: (line) => (row.tracking_data || []).map(d => <div class='w-full'>
                <VText title='物流商' value={d.tracking_supplier} />
                <VText title='单号' type='button' value={d.tracking_no} onClick={() => trackingRef?.value.open(row.tracking_data.map(d => d.tracking_no))}></VText>
                <VText title='揽收时间' value={d.accept_time} />
                <VText title='预估物流时效' value={d.estimate_day} />
                <VText title='预估到达时间' value={d.estimate_arrive_time} />
              </div>)
            }}
          </VMore>
        }
      }
    },
    {
      width: 250, slots: {
        header: () => <div>外验信息</div>,
        default: ({ row, rowIndex }) => {
          const { inspection_data } = row
          if (!inspection_data?.length) return '-'
          const content = () => inspection_data.map(d => <div class='w-full'>
            <VText title='预计外验时间'>{d.inspection_time}</VText>
            <VText title='QA验货时间'>{d.qa_inspection_time}</VText>
          </div>)
          return <VMore value={content} key={rowIndex} />
        }
      }
    },
    {
      width: 240, slots: {
        header: () => <div>入库信息</div>,
        default: ({ row, rowIndex }) => {
          const { inbound_data } = row
          if (!inbound_data?.length) return '-'
          const content = () => inbound_data.map(d => <div class='w-full'>
            <div class="grid grid-cols-2 gap-x-3">
              <VText title='收货数量'>{d.deliver_num}</VText>
              <VText title='质检数量'>{d.qa_num}</VText>
              <VText title='良品数量'>{d.quality_num}</VText>
              <VText title='不良数量'>{d.reject_num}</VText>
              <VText title='入库数量'>{d.inbound_num}</VText>
              <VText title='未到货数量'>{d.not_deliver_num}</VText>
            </div>
          </div>)
          return <VMore value={content} key={rowIndex} />
        }
      }
    },
    {
      width: 200, slots: {
        header: () => <div>异常信息</div>,
        default: ({ row, rowIndex }) => {
          const { abnormal_data } = row
          if (!abnormal_data?.length) return '-'
          const content = () => abnormal_data.map(d => <div class='w-full'>
            <VText title='异常单号' value={d.abnormal_no}></VText>
            <VText title='异常备注' value={d.qa_remark}></VText>
            <VText title='异常处理状态' value={d.abnormal_status_name}></VText>
          </div>)
          return <div class='max-w-full'>
            <VText title='是否有异常' value={row.is_abnormal}></VText>
            <VMore value={content} key={rowIndex} />
          </div>
        }
      }
    },
    {
      width: 240, slots: {
        header: () => <div>发货信息</div>,
        default: ({ row, rowIndex }) => {
          const { deliver_data } = row
          if (!deliver_data?.length) return '-'
          const content = () => deliver_data.map(d => <div class='w-full'>
            <VText title='发货单号' value={d.deliver_no}></VText>
            <VText title='数量'>{d.deliver_num}</VText>
            <VText title='预计发货日期'>{d.except_deliver_time}</VText>
          </div>)
          return <VMore value={content} key={rowIndex} />
        }
      }
    },
    {
      width: 100, slots: {
        header: () => <div>到货日期更新状态</div>,
        default: ({ row }) => <div>
          <VText value={row.change_deliver_status_name} line={4} />
        </div>
      }
    },
    {
      title: '操作', width: 90, fixed: 'right', slots: {
        default: ({ row, rowIndex }) => {
          const { detail_purchase_status } = row
          // detail_purchase_status	采购状态: 1等待审核完成 2待供应商负责人确认 3需求驳回 4采购暂停 5待下单 6部分下单 7已全部下单 8取消采购
          return <div class='nm flex flex-col gap-1 items-start'>
            {row.audit_status !== 6 ? <VButton auth="/purchase/manage/purchase-sku/special_storage" link type="primary" onClick={() => handleRow('special', row)}>特采入库</VButton>:''}
            {/* <VButton auth="/purchase/manage/purchase-sku/remark" link type="primary" onClick={() => handleRow('remark', row)}>备注</VButton> */}
            <VButton auth="/purchase/manage/purchase-sku/view"  link type="primary" loading={loadings['view'+rowIndex]} onClick={() => handleRow('view', row, rowIndex)}>预览</VButton>
            {['FR', 'DE', 'ES', 'UK', 'IT'].includes(row.country) ? <VButton auth="/purchase/manage/purchase-sku/download" link type="primary" loading={loadings['download'+rowIndex]} onClick={() => handleRow('download', row, rowIndex)}>下载</VButton> : ''}
            <VButton auth="/purchase/manage/purchase-sku/log" link type="primary" onClick={() => handleRow('log', row)}>日志</VButton>
          </div>
        }
      }
    },
  ],
  proxyConfig: {
    autoLoad: false,
    ajax: {
      query: ({ page, form }) => api.query({ ...form, ...page })
    }
  }
})
</script>